<script setup lang="ts">
import Menu from './Menu.vue'
import Header from './Header.vue'
import Notification from './Notification.vue'
import { ref } from 'vue'
import type NotificationType from './types'

const notifications: NotificationType[] = [
  {
    id: 1,
    time: '9:24 AM',
    name: '曾国藩',
    msg: '在困难面前表现懦弱，被失败击倒，是一个男人最大的耻辱'
  },
  { id: 2, time: '8:19 AM', name: 'Alice', msg: 'Do what you love and master it !' },
  { id: 3, time: 'Yesterday', name: '胖卡', msg: '打铁没样，边打边像' }
]

const active = ref(false)
</script>

<template>
  <div class="notification-menu-search__container">
    <div :class="['ui', { active: active }]">
      <Header @changeActive="active = !active" />
      <Notification :notifications />
    </div>
    <Menu :active />
  </div>
</template>

<style lang="scss" scoped>
.notification-menu-search__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ui {
  position: absolute;
  top: 30px;
  left: 50px;
  z-index: 2;
  width: 300px;
  height: 335px;
  overflow: hidden;
  transition: all 0.5s linear;

  &.active {
    transform: translateX(150px);
  }
}
</style>
